<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">建议课表</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test-table-page" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarlist">
    <div class="layui-form-item">
        <div class="layui-input-inline" style="width: 75px;margin-left: 0px;float: left; margin-right: 5px">
            <select lay-filter="yearFilter" id="yearFilter" name="yearFilter">
            </select>
        </div>
        <div class="layui-input-inline" style="width: 155px;margin-left: 5px;float: left;">
            <select lay-filter="specialtyFilter" id="specialtyFilter" name="specialtyFilter">
            </select>
        </div>
    </div>
</script>

<script>
    layui.use(['jquery', 'table'], function(){
        var $ = layui.$, form = layui.form, table = layui.table;

        var stuGrade;
        var stuSpecialtyCode;
        var specialtyList;

        var load = layer.load(2);
        renderGrade();
        function renderGrade() {
            $.ajax({
                url: "/jw/stu/info",
                dataType: 'JSON',
                complete: function (result) {
                    layer.close(load);
                    result = result.responseJSON;
                    if (result['status'] !== 200) {
                        layer.msg(result['message']);
                        return
                    }
                    stuGrade = result['data']['grade'];
                    stuSpecialtyCode = result['data']['specialtyCode'];
                    load = layer.load(2);
                    renderSpecialty(stuGrade);
                }
            });
        }

        function renderSpecialty(grade) {
            $.ajax({
                url: "/jw/specialty/" + grade,
                dataType: 'JSON',
                complete: function (result) {
                    layer.close(load);
                    result = result.responseJSON;
                    if (result['status'] === 200) {
                        // 清空
                        $('#specialtyFilter').empty();
                        specialtyList = result.data;
                        var specialtyNum = "";
                        for(var specialty in specialtyList) {
                            specialty = specialtyList[specialty];
                            if (specialty['code'] === stuSpecialtyCode) {
                                specialtyNum = specialty["number"]
                            }
                        }
                        load = layer.load(2);
                        renderTable(stuGrade, specialtyNum)
                    } else {
                        layer.msg(result['message'])
                    }
                }
            })
        }

        function renderTable(grade, specialtyNum) {
            $.ajax({
                url: "/jw/course/plan/" + grade + "/" + specialtyNum,
                dataType: 'JSON',
                complete: function (result) {
                    layer.close(load);
                    result = result.responseJSON;
                    if (result['status'] === 200) {
                        var classInfoData = result['data'];
                        table.render({
                            elem: '#test-table-page'
                            ,cols:[[
                                {field: 'semester', minWidth: 135, title:'学期'}
                                ,{field:'courseName', minWidth: 120, title:'课程'}
                                ,{field:'credit', minWdth:60, title:'学分'}
                                ,{field:'courseType', minWidth:140,  title:'类型'}

                            ]]
                            ,toolbar: '#toolbarlist'
                            ,data: classInfoData
                            ,limit: classInfoData.length
                            ,done: function () {
                                var today = new Date();
                                var year = today.getFullYear();
                                var startYear = year - 4;
                                $('#yearFilter').empty();
                                grade = parseInt(grade)
                                for (var i = year; i >= startYear; i--) {
                                    if (i === grade) {
                                        $('#yearFilter').append("<option value='" + i + "' selected>" + i + "</option>");
                                    }else {
                                        $('#yearFilter').append("<option value='" + i + "'>" + i + "</option>");
                                    }
                                }
                                var html;
                                for(var specialty in specialtyList) {
                                    specialty = specialtyList[specialty];
                                    if (specialty['number'] === specialtyNum) {
                                        html = "<option selected value='" + specialty['number'] + "'>" + specialty['name'] + "</option>"
                                    } else  {
                                        html = "<option value='" + specialty['number'] + "'>" + specialty['name'] + "</option>"
                                    }
                                    $('#specialtyFilter').append(html);
                                }
                                form.render("select");

                                // 隐藏自带工具栏
                                $('.layui-table-tool-self').hide();
                                // 修改自带样式
                                $('.layui-table-tool-temp').css('padding-right', '0px');
                                $('.layui-table-tool').css('padding-right', '0px');
                            }
                        })
                    }else {
                        layer.msg(result['message'])
                    }
                }
            });
        }

        // 监听年份，点击后获取当年的专业列表
        form.on("select(yearFilter)", function () {
            load = layer.load(2);
            var grade = $('#yearFilter').val();
            var specialtyNum = $('#specialtyFilter').val();
            renderTable(grade, specialtyNum);
        });

        // 监听点击专业
        form.on('select(specialtyFilter)', function () {
            load = layer.load(2);
            var grade = $('#yearFilter').val();
            var specialtyNum = $('#specialtyFilter').val();
            renderTable(grade, specialtyNum);
        })
    });
</script>